<template>
  <div>
    <el-form :model="form" label-width="110px" ref="form" :rules='rules'>
      <el-row>
        <el-col :span="24">
          <el-form-item label="车型:" prop="lx">
            <span>{{form.carModelName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="车辆VIN:" prop="vin">
            <el-select v-model="form.vin" placeholder="请选择" class='w-100'>
              <el-option
                v-for="item in selectVinOptions"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col
          :span="24"
          align="right"
        >
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleOk">确 定</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { matchCar, findInventoryVin } from '@/api/pre-sale/orderManagement/newCar'
import UploadImg from './uplaod'
export default {
  components: {
    UploadImg
  },
  props: {
    dialogData: {
      type: Object,
      default: () => {}
    }
  },
  name: 'myDialog',
  data() {
    return {
      showList: [],
      form: {},
      selectVinOptions: [],
      rules: {
        vin: [{ required: true, message: '请选择车辆VIN', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.form = this.dialogData;
    this.getVinList();
  },
  methods: {
    async getVinList() {
      const {success, data} = await findInventoryVin(this.form.carModelId);
      if (success) {
        this.selectVinOptions = data
      }
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          matchCar(this.form.id, this.form.vin).then(response => {
            if (response.success) {
              this.$message.success('操作成功');
              this.$emit('close', true)
            }
          })
        } else {
          return false;
        }
      });
      
    },
    handleClose() {
      this.$emit('close', true)
    }
  }
}
</script>

<style scoped>

</style>
